<!--
 * @Author: 张卓南
 * @Date: 2023-10-21 13:21:25
 * @LastEditTime: 2023-10-21 13:57:40
 * @Description: 
-->
<template>
  <div class="flex justify-center px-8 mt-8">
    <div class="flex flex-col w-full">
      <div @click="topreResult" class="box p-2">
        <van-card thumb="../../src/assets/出行.png">
          <template #title>
            <div class="title">
              <div>2023-11-01 下班行程</div>
              <div>
                <van-tag round :color="changeColor(result.status)" size="medium">{{ mapStutas(result.status) }}</van-tag>
              </div>
            </div>
          </template>
          <template #desc>
            <div class="mt-5">
              <div class="content">
                <div>
                  <div>{{ result.destination }} > {{ result.source }}</div>
                  <div>{{ result.driverUser.loginName }}{{result.peopleNum}}人 下班单程</div>
                  <div>出行时间：{{ formatTime(result.departureTime) }}</div>
                </div>
              </div>
            </div>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { Icon } from "@vicons/utils";
import { UserOutlined, MobileOutlined } from "@vicons/antd";
import car from "@/assets/出行.png";
import { useRoute, useRouter } from "vue-router";
import {formatTime,mapStutas} from '@/utils/index.js'
import { changeStatus, changeColor } from "../utils/is/index.ts";
export default defineComponent({
  name: "Piece",
  props: {
    data: Object,
    userType:String
  },

  setup(props, context) {
    const router = useRouter();
    const result = props?.data;
    console.log("resultList", result);
    const cancel = (index) => {
      console.log(quxiao);
      
    };

    const topreResult = () => {
      router.push({
        path: '/PreResult',
        query:{...result,userType:props.userType}
      })
    }
    return { car, result,formatTime,mapStutas,topreResult,changeStatus,changeColor };
  },
});
</script>

<style scoped lang="less">
:deep(.van-card) {
  background: white;
  padding: 0;
}
.box {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.title {
  display: flex;
  justify-content: space-between;
}
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
